.content {}

.top {
    padding         : 16px 24px;
    font-size       : 16px;
    background-color: #F8F8F8;
    box-shadow      : 0px 6px 8px 0px rgba(0, 0, 0, 0.1);
}

.body {
    padding: 24px;

    .file-list {
        .file-list-item {
            border: 1px solid #E5E5E5;

            .t-content {
                display    : flex;
                align-items: center;
                padding    : 20px 24px;
            }

            .no {
                border-radius   : 50%;
                width           : 40px;
                height          : 40px;
                background-color: #5856D6;
                color           : #fff;
                margin-right    : 24px;
            }

            .file-name {
                padding         : 9px 25px;
                background-color: #F8F8F8;
                border          : 1px solid #E5E5E5;
                font-size       : 16px;
                margin-right    : 24px;
                height          : 40px;
            }

            .sp-line {
                background-color: #C4C4C4;
                margin-right    : 24px;
            }

            .file-content {
                padding         : 9px 0px 9px 25px;
                background-color: #F8F8F8;
                border          : 1px solid #E5E5E5;
                font-size       : 16px;
                flex            : 1;
                height          : 40px;

                a {
                    color: #303133;
                }
            }

            .explan {
                display         : flex;
                background-color: #F2F2F2;
                height          : 150px;
                padding         : 16px;

                .c-name {
                    color    : #909399;
                    font-size: 16px;
                }
            }
        }
    }
}

.bottom {
    padding   : 11px 24px;
    display   : flex;
    box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.1);

    .sub-txt {
        background-color: #FB513808;
        color           : #FB5138;
        padding         : 6px 8px;
    }
}

.a-c {
    justify-content: center;
    align-items    : center;
    display        : flex;
}

.img-item {
    cursor    : pointer;
    width     : 102px;
    height    : 102px;
    position  : relative;
    text-align: center;

    img {
        width : 100%;
        height: 100%;
    }

    .ac-p {
        opacity            : 0;
        transition-duration: 0.2s;
    }

    &:hover {
        .ac-p {
            opacity: 1;
        }
    }
}

.file-item {
    margin         : 0px 0px 15px 15px;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.file-type-base {
    width          : 102px;
    height         : 102px;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.file-type-pdf {
    background-color: #FB5138;
    color           : #fff;
}

.file-type-word {
    background-color: #1267FA;
    color           : #fff;
}

.file-type-excel {
    background-color: #21CF68;
    color           : #fff;
}

.file-type-zip {
    background-color: #FFCD42;
    color           : #fff;
}

.f-list {
    display  : flex;
    flex-wrap: wrap;
}